<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>基本信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="./css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<style>
			.sub-title {
				color: #666;
				line-height: 50px;
				text-align: center;
				font-size: 16px;
			}
			#baseinfo-page .form {
				width: 100%;
				border-radius: 0;
			}
			#baseinfo-page .mui-input-row label {
				width: 120px;
				height: 40px;
				font-size: 14px;
				line-height: 18px;
				padding-left: 10px;
			}
			.mui-input-row.has-picker .mui-icon-arrowdown{
				position: absolute;
				right: 0;
				top: 0;
			}
			#baseinfo-page .mui-input-row .mui-input-clear, #baseinfo-page .mui-input-row .mui-input {
				width: 220px;
			}
			#baseinfo-page .mui-input-row .mui-input-clear[disabled] {
				color: #666;
			}
			#baseinfo-page .contact-info {
				line-height: 30px;
				padding-left: 120px;
				font-size: 14px;
				color: #666;
			}
			.form .sure-btn {
				width: 100%;
				height: 40px;
				background-color: #4cc8cf;
				border-color: #4cc8cf;
				font-size: 15px;
			}
			.form .sure-btn:active {
				background-color: #27e2ed;
				border-color: #27e2ed;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">资料收集</h1>
		</header>
		<div class="mui-content baseinfo-page" id="baseinfo-page">
			<p class="sub-title">基本信息</p>
			<form class="form">
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<label>姓名：</label>
						<input type="text" class="mui-input-clear" value="张三" placeholder="" disabled>
					</div>
				</div>
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<label>身份证号：</label>
						<input type="text" class="mui-input-clear" value="123456789123456789" placeholder="" disabled>
					</div>
				</div>
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<label>芝麻信用：</label>
						<input type="text" class="mui-input-clear" value="369" placeholder="" disabled>
					</div>
				</div>
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<label>借款金额：</label>
						<input type="text" class="mui-input-clear" value="500" placeholder="" disabled>
					</div>
				</div>
				<div class="input-row" id="contact1">
					<div class="input-wrap mui-input-row has-picker">
						<label>紧急联系人1：</label>
						<input type="text" class="mui-input" value="配偶" data-val="1" placeholder="" onclick="openContactsPick('contact1', )">
						<span class="mui-icon mui-icon-arrowdown"></span>
					</div>
					<div class="contact-info">张三(12345678911)</div>
				</div>
				<div class="input-row" id="contact2">
					<div class="input-wrap mui-input-row has-picker">
						<label>紧急联系人2：</label>
						<input type="text" class="mui-input" value="其他亲属" data-val="2" placeholder="" onclick="openContactsPick('contact2')">
						<span class="mui-icon mui-icon-arrowdown"></span>
					</div>
					<div class="contact-info">李四(12345678922)</div>
				</div>
				
				<button type="button" class="mui-btn mui-btn-primary sure-btn" onclick="sureHandler()">认证</button>
			</form>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./js/mui.picker.min.js"></script>
		<script src="./js/common.js"></script>
		<script>
			console.log('collect jd page start');
			function openContactsPick(name) {
				var dom = window.event.target;
				var dataVal = dom.getAttribute('data-val');  //获取当前dom对象的value
				var picker = new mui.PopPicker();
				var mockData = [
					{value: 1, name: '张三', type: '配偶', phone: '12345678911'},
					{value: 2, name: '李四', type: '其他亲属', phone: '12345678922'}
				];
				var parseData = [];
				var selectedIndex = -1;
				for (var i = 0; i < mockData.length; i ++) {
					parseData.push({
						value: mockData[i].value,
						text: mockData[i].name + '(' + mockData[i].type +')'
					});
					if (dataVal == mockData[i].value) {
						selectedIndex = i;
					}
				}
				picker.setData(parseData);
				picker.pickers[0].setSelectedIndex(selectedIndex);
				picker.show(function (selectItems) {
				    console.log(selectItems[0]);
				    var lastIndex = -1;
				    for (var i = 0; i < mockData.length; i ++) {
						if (selectItems[0].value === mockData[i].value) {
							lastIndex = i;
						}
					}
					if (lastIndex !== -1) {
				    	dom.setAttribute('value', mockData[lastIndex].name);
				    	dom.setAttribute('data-val', mockData[lastIndex].value);
				    	var str = '#'+ name +' .contact-info';
				    	var contactDom = document.querySelector(str);
				    	contactDom.innerHTML = mockData[lastIndex].name + '(' + mockData[lastIndex].phone +')';
					}
				})
			}

			// 确定认证信息
			function sureHandler() {
				// mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/baseinfo',{
				// 	data: {
				// 	},
				// 	dataType:'json',//服务器返回json格式数据
				// 	type:'post',//HTTP请求类型
				// 	timeout:10000,//超时时间设置为10秒；
				// 	headers:{'Content-Type':'application/json'},	              
				// 	success:function(data){
				// 		console.log(data);
				// 	},
				// 	error:function(xhr,type,errorThrown){
				// 		//异常处理；
				// 		console.log(type);
				// 	}
				// });
			}
		</script>
	</body>

</html>